<template>
  <div class="design-task-details">
    <h1>{{ task.title }}</h1>
    <div class="description">{{ task.description }}</div>
    <img :src="task.image" alt="Design Task" class="image"/>
    <div class="details">
      <div><strong>领域：</strong>{{ task.domain }}</div>
      <div><strong>类型：</strong>{{ task.type }}</div>
      <div><strong>佣金：</strong>{{ task.commission }}</div>
    </div>
    <div class="actions">
      <el-button type="success" plain @click="claimTask">领取任务</el-button>
      <el-button type="danger" plain @click="contactClient">联系顾问</el-button>
      <el-button type="warning" plain @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import store from "@/store";
import { MessageBox } from "element-ui";

export default {
  name: "DesignTaskDetails",
  data() {
    return {
      task: {}
    }
  },
  created() {
    this.fetchDesignTasksByid(this.$route.params.id);
  },
  methods: {
    open() {
          this.$alert('亲，领取任务后记得联系顾问，来获取客户具体的需求文档哟。', '温馨提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        },
    fetchDesignTasksByid(id) {
      axios.get(`api/design_task/get?id=${id}`, {
        baseURL: process.env.VUE_APP_BASE_API,
        timeout: 15000
      }) // 替换为后端API的URL
          .then(response => {
            console.log(response);
            this.task = response.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    claimTask() {
      if (this.checkIfUserIsLoggedIn()) {
        this.open();
      } else {
        MessageBox.confirm("请先登录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
            .then(() => {
              // 保存当前地址
              const currentPath = window.location.pathname;
              console.log(currentPath);
              // 跳转到登录页面，并传递当前地址作为参数
              this.$router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
            })
            .catch(() => {});
      }
      // 领取任务的逻辑
    },
    contactClient() {
      // 联系顾问的逻辑
      if (this.checkIfUserIsLoggedIn()) {
        MessageBox.alert("联系成功", "提示", {
          confirmButtonText: "确定",
          type: "success"
        });
      } else {
        MessageBox.confirm("请先登录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
            .then(() => {
              // 保存当前地址
              const currentPath = window.location.pathname;
              console.log(currentPath);
              // 跳转到登录页面，并传递当前地址作为参数
              this.$router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
            })
            .catch(() => {});
      }
    },
    goBack(){
    this.$router.go(-1); // 返回上一页
    },
    submitWork() {
      // 提交作品的逻辑
    },
    checkIfUserIsLoggedIn() {
      const token = store.getters.token;
      return !!token; // 如果token存在，则表示用户已登录
    }

  }
}

</script>


<style scoped>
.design-task-details {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 24px;
  margin-bottom: 10px;
}

.description {
  margin-bottom: 20px;
}

.image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;

  border-radius: 8px;
}

.details {
  margin-bottom: 20px;
}

.actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
}

.login-prompt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24px;
}
</style>
